<template>
  <div class="post-list">
    <el-card v-for="post in postList" :key="post.id" shadow="hover" class="box-card">
      <template #header>
        <div class="card-header">
          <span style="color: #409eff">{{ post.title }}</span>
          <div class="tag">
            <el-tag
                v-for="tag in post.tags"
                :key="tag"
                style="font-size: 10px;margin-right: 10px"
                type="warning"
            >
              {{ tag }}
            </el-tag>
          </div>
          <el-button class="button" style="float: right" @click="handlePost(post.id)" text>查看详情</el-button>
        </div>
      </template>
      <div class="text item" style="display: flex">
          <div style="display: flex;align-items: center">{{ post.post.substring(0,30).concat('...') }}</div>
          <img src="../../public/ikun.jpg" alt="缩略图" width="50" height="50" style="margin-left: 50px"/>
      </div>
    </el-card>
  </div>

</template>

<script setup>
import {ref,defineProps} from 'vue'
import {useRouter} from "vue-router";

const router = useRouter()
const {postList} = defineProps({postList:Array})


// 跳转帖子详情
const handlePost = (postId) => {
  const {href} = router.resolve({
    name:'Post',
    params :{
      id:postId
    }
  })
  window.open(href)

}
</script>

<style lang="less" scoped>
.post-list {
  .el-card{
    margin-bottom: 25px;
  }
}

* {
  font-size: 20px;
}
</style>